<template>
  <el-container>
    <el-header>
      <div class="header-container">
        <div class="left">
          <el-menu mode="horizontal" router :default-active="$route.path">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item v-if="isLoggedIn" :index="'/profile/' + userId">个人主页</el-menu-item>
          </el-menu>
        </div>
        <div class="right">
          <template v-if="!isLoggedIn">
            <el-button type="text" @click="$router.push('/login')">登录</el-button>
            <el-button type="primary" @click="$router.push('/register')">注册</el-button>
          </template>
          <template v-else>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-avatar :size="32" :src="userAvatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
                <span style="margin-left: 8px">{{ username }}</span>
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="'profile'">个人主页</el-dropdown-item>
                  <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </div>
      </div>
    </el-header>
    <el-main>
      <router-view @login-success="checkLoginStatus"></router-view>
    </el-main>
  </el-container>
</template>

<script>
import { ArrowDown } from '@element-plus/icons-vue'
import { userApi } from '@/api/user'
import { ElMessage } from 'element-plus'

export default {
  name: 'App',
  components: {
    ArrowDown
  },
  data() {
    return {
      isLoggedIn: false,
      username: '',
      userId: null,
      userAvatar: null
    }
  },
  created() {
    this.checkLoginStatus()
  },
  methods: {
    checkLoginStatus() {
      const token = localStorage.getItem('token')
      const userId = localStorage.getItem('userId')
      const username = localStorage.getItem('username')
      
      this.isLoggedIn = !!token && !!userId
      if (this.isLoggedIn) {
        this.userId = userId
        this.username = username || ''
        if (!this.username) {
          this.fetchUserInfo()
        }
      } else {
        this.username = ''
        this.userId = null
        this.userAvatar = null
      }
    },
    async fetchUserInfo() {
      try {
        const response = await userApi.getUserInfo(this.userId)
        this.username = response.username
        this.userAvatar = response.avatar
      } catch (error) {
        console.error('获取用户信息失败:', error)
        if (error.response?.status === 401) {
          this.handleLogout()
          ElMessage.error('登录已过期，请重新登录')
        }
      }
    },
    handleCommand(command) {
      switch (command) {
        case 'profile':
          this.$router.push(`/profile/${this.userId}`)
          break
        case 'logout':
          this.handleLogout()
          break
      }
    },
    handleLogout() {
      localStorage.removeItem('token')
      localStorage.removeItem('userId')
      localStorage.removeItem('username')
      this.isLoggedIn = false
      this.username = ''
      this.userId = null
      this.userAvatar = null
      this.$router.push('/login')
      ElMessage.success('已退出登录')
    }
  }
}
</script>

<style>
/* 修复 ResizeObserver 错误 */
.el-table {
  --el-table-border-color: var(--el-border-color-lighter);
  --el-table-border: 1px solid var(--el-table-border-color);
  --el-table-text-color: var(--el-text-color-regular);
  --el-table-header-text-color: var(--el-text-color-secondary);
  --el-table-row-hover-bg-color: var(--el-fill-color-light);
  --el-table-current-row-bg-color: var(--el-color-primary-light-9);
  --el-table-header-bg-color: var(--el-fill-color-light);
  --el-table-fixed-box-shadow: var(--el-box-shadow-light);
  --el-table-bg-color: var(--el-fill-color-blank);
  --el-table-tr-bg-color: var(--el-fill-color-blank);
  --el-table-expanded-cell-bg-color: var(--el-fill-color-blank);
  --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
  --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
}

.el-header {
  padding: 0;
  height: auto !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
}

.left {
  display: flex;
  align-items: center;
}

.right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.el-menu {
  border-bottom: none !important;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #303133;
}

.el-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.el-button + .el-button {
  margin-left: 12px;
}

/* 修复 ResizeObserver 错误 */
.resize-triggers {
  visibility: hidden;
  opacity: 0;
}

.resize-triggers, .resize-triggers > div, .contract-trigger:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.resize-triggers > div {
  background: #eee;
  overflow: auto;
}

.contract-trigger:before {
  width: 200%;
  height: 200%;
}
</style>
